<template>
    <div class="listDiv pd10">
        <div class="searchDiv mb20">
            <div class="flex1"></div>
            <el-button type="primary" @click="add">添加角色</el-button>
        </div>

        <el-table :data="obj.ary" style="width: 100%;flex: 1;"
            :header-cell-style="{ background: '#E5E6EB', color: '#333333' }">
            <el-table-column prop="name" label="角色名称"></el-table-column>
            <el-table-column prop="height" label="操作" width="100">
                <template #default="scope">
                    <el-button type="primary" size="small"@click="edit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-drawer v-model="obj.drawer.show" :title="obj.drawer.title" size="50%" direction="rtl" :close-on-click-modal="false" destroy-on-close>
            <Edit v-model:id="obj.drawer.id" @init="init" @close="obj.drawer.show = false" />
        </el-drawer>
    </div>
</template>

<script setup>
    import { reactive,getCurrentInstance } from 'vue'
    import Edit from './edit.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        drawer: {
            show: false,
            title: "",
            id: 0
        },
        ary:[],
        req:{
            currentpage: 1,
            pagesize: 10,
            count: 0,
        }
    })

    let init = () => {
        proxy.$ajax({
            url: '/manager/role/list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }
    init()

    let add = () => {
        obj.drawer.show = true
        obj.drawer.title = "添加角色"
        obj.drawer.id = 0;
    }
    
    let edit = x => {
        obj.drawer.show = true
        obj.drawer.title = "修改角色"
        obj.drawer.id = parseInt(x.role_id);
    }
</script>

<style scoped>
</style>